<div class="md-content" class="inset">
    <div layout-gt-xs="row">
        <div flex-gt-xs="50">
          <mat-card>
              <mat-card-title>Compute Usage</mat-card-title>
              <mat-divider></mat-divider>
              <div class="chart-height push-top-sm">
                <ngx-charts-line-chart
                  [scheme]="orangeColorScheme"
                  [results]="multi"
                  [gradient]="gradient"
                  [xAxis]="showXAxis"
                  [yAxis]="showYAxis"
                  [legend]="showLegend"
                  [showXAxisLabel]="showXAxisLabel"
                  [showYAxisLabel]="showYAxisLabel"
                  [xAxisLabel]="xAxisLabel"
                  [yAxisLabel]="yAxisLabel"
                  [autoScale]="autoScale"
                  [yAxisTickFormatting]="axisDigits">
                </ngx-charts-line-chart>
              </div>
              <mat-divider></mat-divider>
              <mat-card-actions>
                <a mat-button color="accent">
                  <span class="text-upper">View Stats</span>
                </a>
              </mat-card-actions>
          </mat-card>
        </div>
        <div flex-gt-xs="50">
          <mat-card>
              <mat-card-title>Ingest Usage</mat-card-title>
              <mat-divider></mat-divider>
              <div class="chart-height push-top-sm">
                <ngx-charts-line-chart
                  [scheme]="blueColorScheme"
                  [results]="multi2"
                  [gradient]="gradient"
                  [xAxis]="showXAxis"
                  [yAxis]="showYAxis"
                  [legend]="showLegend"
                  [showXAxisLabel]="showXAxisLabel"
                  [showYAxisLabel]="showYAxisLabel"
                  [xAxisLabel]="xAxisLabel"
                  [yAxisLabel]="yAxisLabel"
                  [autoScale]="autoScale"
                  [yAxisTickFormatting]="axisDigits">
                </ngx-charts-line-chart>
              </div>
              <mat-divider></mat-divider>
              <mat-card-actions>
                <a mat-button color="accent">
                  <span class="text-upper">View Stats</span>
                </a>
              </mat-card-actions>
          </mat-card>
        </div>
    </div>
    <div layout-gt-sm="row">
        <div flex-gt-sm="60">
            <mat-card>
            <mat-card-title>All Activity</mat-card-title>
            <mat-card-subtitle>for this product</mat-card-subtitle>
            <mat-divider></mat-divider>
            <mat-nav-list class="will-load item-list">
                <ng-template tdLoading="items.load">
                <ng-template let-item let-last="last" ngFor [ngForOf]="items">
                    <a mat-list-item layout-align="row" [routerLink]="['../item', item.item_id]">
                    <mat-icon matListAvatar> {{item.icon}} </mat-icon>
                    <h3 matLine> {{item.name}} </h3>
                    <p matLine> {{item.description | truncate:40}} </p>
                    <span flex></span>
                    <span class="md-caption text-right" flex="20"> {{item.created | timeAgo }} </span>
                    </a>
                    <mat-divider *ngIf="!last" matInset></mat-divider>
                </ng-template>
                </ng-template>
            </mat-nav-list>
            </mat-card>
        </div>
        <div flex-gt-sm="40">
            <mat-card>
            <mat-card-title>Customers</mat-card-title>
            <mat-card-subtitle>for this product</mat-card-subtitle>
            <mat-divider></mat-divider>
            <mat-list class="will-load user-list">
                <ng-template tdLoading="users.load">
                <ng-template let-user let-last="last" ngFor [ngForOf]="users">
                    <mat-list-item layout-align="row">
                    <mat-icon matListIcon>account_box</mat-icon>
                    <h3 matLine> {{user.displayName}} </h3>
                    <p matLine> {{user.id}} </p>
                    </mat-list-item>
                    <mat-divider *ngIf="!last" matInset></mat-divider>
                </ng-template>
                </ng-template>
            </mat-list>
            <mat-divider></mat-divider>
            <mat-card-actions>
                <a mat-button color="accent" class="text-upper" [routerLink]="['/users']">
                <span>View More</span>
                </a>
            </mat-card-actions>
            </mat-card>
        </div>
    </div>
</div>
<a mat-fab color="accent" class="mat-fab-bottom-right fixed" [routerLink]="['/form']">
    <mat-icon>add</mat-icon>
</a>
